<template>
  <form-dialog ref="formDrawerRef" title="新增车辆" top="2vh" width="98%" @submit="handleSubmit">
    <div class="dialog-body">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
        <el-row :gutter="0">
          <el-col v-for="item in configList" :key="item.value" :span="item.span">
            <!-- {{ form[item.value] }} - {{ item.value }} -->
            <template v-if="item.types === 'input'">
              <el-form-item :label="item.label" :prop="item.value">
                <el-input v-model="form[item.value]" :placeholder="item.placeholder" size="large"></el-input>
              </el-form-item>
            </template>
            <template v-else-if="item.types === 'Number'">
              <el-form-item :label="item.label" :prop="item.value">
                <el-input-number :min="item.min" :precision="item.precision ? item.precision : 0"
                  v-model="form[item.value]" :placeholder="item.placeholder" style="width: 100%"
                  size="large"></el-input-number>
              </el-form-item>
            </template>
            <!-- carRegisterPlaceCode -->
            <template v-else-if="item.types === 'select'">
              <el-form-item v-if="item.value == 'carRegisterPlace'" :label="item.label" :prop="item.value">
                <el-select v-model="form[item.value]" :placeholder="item.placeholder" size="large">
                  <el-option v-for="option in areaList" :key="option.areaCode" :label="option.area"
                    :value="option.areaCode"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-else :label="item.label" :prop="item.value">
                <el-select  v-model="form[item.value]" :placeholder="item.placeholder" size="large">
                  <el-option v-for="option in item.options" :key="option.value" :label="option.label"
                    :value="option.value"></el-option>
                </el-select>
                
              </el-form-item>
            </template>
            <template v-else-if="item.types === 'time'">
              <el-form-item :label="item.label" :prop="item.value">
                <el-date-picker v-model="form[item.value]" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" size="large"></el-date-picker>
              </el-form-item>
            </template>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </form-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useInitForm } from "@/hooks/useCommon";
import FormDialog from "@/components/FormDialog.vue";
import { isCarNum } from "@/utils/regular";

const { formDrawerRef, formRef, form, rules, handleEdit, handleCreate } = useInitForm({
  form: {
    // 默认值，
    // carHeight: 1000,
    // carWidth:1000,
    // carLength: 1000,
    // ratifiedQuality:1.00,
    // ratifiedNum:1


  }, rules: {
    
    licensePlate: [
      { required: true, message: "请输入车牌号", trigger: "blur" },
    {
          validator(rule: any, value: any, callback: any) {
            if (!isCarNum(value)) {
              callback(new Error("请输入正确的车牌号"));
            } else {
              callback();
            }
          }
        }
    ],
    licensePlateColor: [{ required: true, message: "请选择车牌颜色", trigger: "blur" }],
    carRegisterPlace: [{ required: true, message: "请选择车籍地", trigger: "blur" }],
    carCategory: [{ required: true, message: "请选择车辆类别", trigger: "blur" }],
    carType: [{ required: true, message: "请选择车辆类型", trigger: "blur" }],
    companyName: [{ required: true, message: "请输入所属企业", trigger: "blur" }],
    businessStatus: [{ required: true, message: "请选择营运状态", trigger: "blur" }],
    registerDate: [{ required: true, message: "请选择上牌日期", trigger: "blur" }],
  },
});


const configList = ref([
  {
    types: "input",
    span: 8,
    label: "车牌号码",
    value: "licensePlate",
    width: "100px",
    placeholder: "请输入车牌号码"
  },
  {
    types: "select",
    span: 8,
    label: "车辆颜色",
    value: "licensePlateColor",
    width: "100px",
    placeholder: "请选择车辆颜色",
    options: [
      {
        label: "黄色",
        value: 1
      },
      {
        label: "蓝色",
        value: 2
      },
      {
        label: "绿色",
        value: 3
      },
      {
        label: "渐变绿",
        value: 4
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "车籍地",
    value: "carRegisterPlace",
    width: "100px",
    placeholder: "请选择车籍地",
    options: [
      {
        label: "农客",
        value: 1
      },
      {
        label: "非农客",
        value: 2
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "车辆类别",
    value: "carCategory",
    width: "100px",
    placeholder: "请选择车辆类别",
    // onChanged:()=>{
    //   form["carType"] = ""
    // },
    options: [
      {
        label: "客运车辆",
        value: 1
      },
      {
        label: "普货车辆",
        value: 2
      },
      {
        label: "危货车辆",
        value: 3
      },
      {
        label: "公交车辆",
        value: 4
      },
      {
        label: "巡游出租车辆 ",
        value: 5
      },
      {
        label: "网约出租车",
        value: 6
      },
      {
        label: "教练车辆 ",
        value: 7
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "车辆类型",
    value: "carType",
    width: "100px",
    placeholder: "请选择车辆类型",
    options: [
      {
        label: "特大型高三级",
        value: 1
      },
      {
        label: "特大型高二级",
        value: 2
      },
      {
        label: "特大型高一级",
        value: 3
      },
      {
        label: "特大型中级",
        value: 4
      },
      {
        label: "特大型普通级",
        value: 5
      },
      {
        label: "大型高三级",
        value: 6
      },
      {
        label: "大型高二级",
        value: 7
      },
      {
        label: "大型高一级",
        value: 8
      },
      {
        label: "大型中级",
        value: 9
      },
      {
        label: "大型普通级",
        value: 10
      },
      {
        label: "中型高二级",
        value: 11
      },
      {
        label: "中型高一级",
        value: 12
      },
      {
        label: "中型中级",
        value: 13
      },
      {
        label: "中型普通级",
        value: 14
      },
      {
        label: "小型高二级",
        value: 15
      },
      {
        label: "小型高一级",
        value: 16
      },
      {
        label: "小型中级",
        value: 17
      },
      {
        label: "小型普通级",
        value: 18
      },
      {
        label: "乘用车高级",
        value: 19
      },
      {
        label: "乘用车中级",
        value: 20
      },
      {
        label: "其他",
        value: 21
      }
    ]
  },
  {
    types: "input",
    span: 8,
    label: "所属企业",
    value: "companyName",
    width: "100px",
    placeholder: "请选择客车类型等级",
  },
  {
    types: "select",
    span: 8,
    label: "营运状态",
    value: "businessStatus",
    width: "100px",
    placeholder: "请选择营运状态",
    options: [
      {
        label: "营运",
        value: 1
      },
      {
        label: "停运",
        value: 2
      },
      {
        label: "挂失",
        value: 3
      },
      {
        label: "迁出（过户）",
        value: 4
      },
      {
        label: "迁出（转籍）",
        value: 5
      },
      {
        label: "报废",
        value: 6
      },
      {
        label: "歇业",
        value: 7
      },
      {
        label: "注销",
        value: 8
      },
      {
        label: "其他",
        value: 9
      },
      {
        label: "备案到省外",
        value: 10
      }
    ]
  },

  {
    types: "time",
    span: 8,
    label: "上牌日期",
    value: "registerDate",
    width: "140px",
    placeholder: "请选择上牌日期"
  },
  {
    types: "time",
    span: 8,
    label: "年审日期",
    value: "annualVerificationDate",
    width: "140px",
    placeholder: "请选择年审日期"
  },
  {
    types: "time",
    span: 8,
    label: "年审有效期",
    value: "annualVerificationValidDate",
    width: "140px",
    placeholder: "请选择年审有效期"
  },
  {
    types: "input",
    span: 8,
    label: "许可证号",
    value: "licenseKey",
    width: "100px",
    placeholder: "请输入许可证号"
  },
  {
    types: "input",
    span: 8,
    label: "道路运输证",
    value: "roadTransportId",
    width: "100px",
    placeholder: "请输入道路运输证"
  },
  {
    types: "input",
    span: 8,
    label: "核发机关",
    value: "issuedBy",
    width: "100px",
    placeholder: "请选择核发机关"
  },
  {
    types: "time",
    span: 8,
    label: "有效期起",
    value: "validDateStart",
    width: "140px",
    placeholder: "请选择起保日期"
  },
  {
    types: "time",
    span: 8,
    label: "有效期止",
    value: "validDateEnd",
    width: "140px",
    placeholder: "请选择终保日期"
  },
  {
    types: "input",
    span: 8,
    label: "车架号",
    value: "vin",
    width: "100px",
    placeholder: "请输入车架号"
  },
  {
    types: "input",
    span: 8,
    label: "发动机型号",
    value: "engineType",
    width: "100px",
    placeholder: "请输入发动机号"
  },
  {
    types: "select",
    span: 8,
    label: "燃料类型",
    value: "energyType",
    width: "100px",
    placeholder: "请选择燃料类型",
    options: [
      { value: 1, label: "汽油" },
      { value: 2, label: "柴油" },
      { value: 3, label: "电" },
      { value: 4, label: "混合油" },
      { value: 5, label: "天然气" },
      { value: 6, label: "液化天然气" },
      { value: 7, label: "甲醇" },
      { value: 8, label: "乙醇" },
      { value: 9, label: "太阳能" },
      { value: 10, label: "混合动力" },
      { value: 11, label: "无" }
    ]
  },
  {
    types: "input",
    span: 8,
    label: "厂牌",
    value: "brand",
    width: "100px",
    placeholder: "请输入厂牌"
  },
  {
    types: "input",
    span: 8,
    label: "车辆厂牌型号",
    value: "brandType",
    width: "100px",
    placeholder: "请输入车辆厂牌型号"
  },
  {
    types: "Number",
    span: 8,
    label: "车辆长度(mm)",
    value: "carLength",
    width: "100px",
    min: 1000,
    placeholder: "请输入车辆长度"
  },
  {
    types: "Number",
    span: 8,
    label: "车辆宽度(mm)",
    value: "carWidth",
    width: "100px",
    min: 1000,
    placeholder: "请输入车辆宽度"
  },
  {
    types: "Number",
    span: 8,
    label: "车辆高度(mm)",
    value: "carHeight",
    width: "300px",
    min: 1000,
    placeholder: "请输入车辆高度"
  },
  {
    types: "Number",
    span: 8,
    label: "核定载质量(kg)",
    value: "ratifiedQuality",
    width: "100px",
    min: 1.00,
    precision: 2,
    placeholder: "请输入核定载质量"
  },
  {
    types: "Number",
    span: 8,
    label: "核定载客位数",
    value: "ratifiedNum",
    width: "100px",
    min: 1,
    placeholder: "请输入核定载客位数",

  },
  {
    types: "select",
    span: 8,
    label: "车辆技术等级",
    value: "technicalGrade",
    width: "100px",
    placeholder: "请选择最近一年是否上线",
    options: [
      {
        label: "未评定",
        value: 1
      },
      {
        label: "一级",
        value: 2
      },
      {
        label: "二级",
        value: 3
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "报废年限",
    value: "scrapLimit",
    width: "100px",
    placeholder: "请选择最近一年是否上线",
    options: [
      {
        label: "5年",
        value: 1
      }
    ]
  }
]);


/** 获取区县列表 */
import { getAreaListApi } from "@/api/user";
type areaListType = { areaCode: string; area: string }[];
const areaList = ref<areaListType>([]);
/** 获取区县列表 */
const getAreaList = () => {
  getAreaListApi().then((response: any) => {
    areaList.value = response
    // 车籍地
    // configList.find(item=>item.value=='carRegisterPlace').options = response.map((item:any)=>{
    //   return {
    //     label:item.area,
    //     value:item.areaCode
    //   }
    // })
  });
};
getAreaList()

//表单验证
const handleSubmit = ()=>{
  // /formRef.value 是 表单对象，validate是进行表单验证的方法，
  // valid参数是验证结果，如果true验证通过，false表示验证不通过
  (formRef.value as any).validate((valid: any) => {
    console.log(valid)
  });
}

defineExpose({
  handleEdit,
  handleCreate
});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
